<template>
    <div class="cont">
        <HpToptitle><p slot="topic">员工</p></HpToptitle>
        <div class="left">
            <el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick"></el-tree>
        </div>
        <div class="right">
            <div class="content">
                <div class="title">
                    <p><span style="color: #999999;">员工 > 员工管理 > </span><span>花名册</span></p>
                </div>
                <div class="neicont">
                    <div class="bluetitle">
                        <div class="blu"></div>
                        <div class="blutxt">通讯录</div>
                    </div>
                    <div class="line">
                        <img src="https://preview.axure6.com/194/images/%E9%80%9A%E8%AE%AF%E5%BD%95/u1139.svg" alt="">
                    </div>
                    <div class="operate">
                        <div class="op-left">
                            <div class="item1">
                                <div class="txt">职位</div>
                                <div class="slc">
                                    <template>
                                        <el-select v-model="value" placeholder="请选择">
                                            <el-option
                                            v-for="item in options"
                                            :key="item.value"
                                            :label="item.label"
                                            :value="item.value">
                                            </el-option>
                                        </el-select>
                                    </template>
                                </div>
                            </div>
                            <div class="item1">
                                <div class="txt">职务</div>
                                <div class="slc">
                                    <template>
                                        <el-select v-model="value" placeholder="请选择">
                                            <el-option
                                            v-for="item in options"
                                            :key="item.value"
                                            :label="item.label"
                                            :value="item.value">
                                            </el-option>
                                        </el-select>
                                    </template>
                                </div>
                            </div>
                            <div class="item1">
                                <div class="txt">职级</div>
                                <div class="slc">
                                    <template>
                                        <el-select v-model="value" placeholder="请选择">
                                            <el-option
                                            v-for="item in options"
                                            :key="item.value"
                                            :label="item.label"
                                            :value="item.value">
                                            </el-option>
                                        </el-select>
                                    </template>
                                </div>
                            </div>
                        </div>
                        <div class="op-right">
                            <div class="op-r-top">
                                <div class="m1">
                                    <div class="m1-1"><img src="https://preview.axure6.com/194/images/%E6%97%A5%E7%A8%8B%E5%BE%85%E5%8A%9E/u967.svg" alt=""></div>
                                    <div>新增员工</div>
                                </div>
                                <div class="m2">
                                    <div>导入</div>
                                </div>
                                <div class="m2">
                                    <div>导出</div>
                                </div>
                                <div class="m3">
                                    <div>更多操作</div>
                                </div>
                            </div>    
                        </div>
                    </div>
                    <div class="operate">
                        <div class="op-left">
                            <div class="item1">
                                <div class="txt">部门</div>
                                <div class="slc">
                                    <template>
                                        <el-select v-model="value" placeholder="请选择">
                                            <el-option
                                            v-for="item in options"
                                            :key="item.value"
                                            :label="item.label"
                                            :value="item.value">
                                            </el-option>
                                        </el-select>
                                    </template>
                                </div>
                            </div>
                            <div class="item1">
                                <div class="txt">工作地点</div>
                                <div class="slc">
                                    <template>
                                        <el-select v-model="value" placeholder="请选择">
                                            <el-option
                                            v-for="item in options"
                                            :key="item.value"
                                            :label="item.label"
                                            :value="item.value">
                                            </el-option>
                                        </el-select>
                                    </template>
                                </div>
                            </div>
                            <div class="item3">
                                <div class="txt">选择日期</div>
                                <template>
                                    <div class="block">
                                        <el-date-picker
                                        v-model="value"
                                        type="daterange"
                                        start-placeholder="开始日期"
                                        end-placeholder="结束日期"
                                        :default-time="['00:00:00', '23:59:59']">
                                        </el-date-picker>
                                    </div>
                                </template>                               
                            </div>
                            <div class="item2">
                                <div class="it2-search">
                                    <el-input v-model="input" placeholder="请输入内容"></el-input>
                                    <img src="https://preview.axure6.com/194/images/%E6%97%A5%E7%A8%8B%E5%BE%85%E5%8A%9E/u972.svg" alt="">
                                </div>
                            </div>
                        </div>
                        
                    </div>
                    <!-- 花名册菜单 -->
                    <div class="list">
                        <ul class="lists">
                            <li>
                                <div class="text">
                                    <p style="font-size: 13px;">在职</p>
                                    <p style="font-size: 20px;">100</p>
                                </div>
                            </li>
                            <li>
                                <div class="text">
                                    <p style="font-size: 13px;" class="text1">在职</p>
                                    <p style="font-size: 20px;">100</p>
                                </div>
                            </li>
                            <li>
                                <div class="text">
                                    <p style="font-size: 13px;">在职</p>
                                    <p style="font-size: 20px;">100</p>
                                </div>
                            </li>
                            <li>
                                <div class="text">
                                    <p style="font-size: 13px;">在职</p>
                                    <p style="font-size: 20px;">100</p>
                                </div>
                            </li>
                            <li>
                                <div class="text">
                                    <p style="font-size: 13px;">在职</p>
                                    <p style="font-size: 20px;">100</p>
                                </div>
                            </li>
                            <li>
                                <div class="text">
                                    <p style="font-size: 13px;">在职</p>
                                    <p style="font-size: 20px;">100</p>
                                </div>
                            </li>
                        </ul>
                    </div>

                    <!-- 表格 -->
                    <div class="form">
                        <template>
                            <el-table
                                ref="multipleTable"
                                :data="tableData" stripe
                                tooltip-effect="dark"
                                style="width: 100%"
                                @selection-change="handleSelectionChange">
                                <el-table-column
                                type="selection"
                                width="55">
                                </el-table-column>
                                <el-table-column
                                label="员工名字"
                                width="120">
                                <template slot-scope="scope">{{ scope.row.date }}</template>
                                </el-table-column>
                                <el-table-column
                                prop="name"
                                label="工号"
                                width="120">
                                </el-table-column>
                                <el-table-column
                                prop="address"
                                label="部门" width="142"
                                show-overflow-tooltip>
                                </el-table-column>
                                <el-table-column
                                prop="name"
                                label="职位"
                                width="145">
                                </el-table-column>
                                <el-table-column
                                prop="name"
                                label="手机号码"
                                width="119">
                                </el-table-column>
                                <el-table-column
                                prop="name"
                                label="邮箱"
                                width="119">
                                </el-table-column>
                                <el-table-column
                                fixed="right"
                                label="操作"
                                width="170">
                                <template slot-scope="scope">
                                    <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
                                    <el-button type="text" size="small">编辑</el-button>
                                    <el-button
                                    @click.native.prevent="deleteRow(scope.$index, tableData)"
                                    type="text"
                                    size="small">
                                    移除
                                    </el-button>
                                </template>
                                </el-table-column>
                            </el-table>
                        </template>
                    </div>
                    <!-- 分页 -->
                    <div class="block">
                        <el-pagination
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page="currentPage4"
                        :page-sizes="[100, 200, 300, 400]"
                        :page-size="100"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="400">
                        </el-pagination>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    
</template>

<script>
import HpToptitle from './HpToptitle.vue';
export default {
    components:{
        HpToptitle
    },
    data(){
        return {
            data: [{
          label: '组织架构',
          children: [{
            label: '二级 1-1',
          },{
            label: '二级 1-2',
            
          },{
            label: '二级 1-3',
            
          },{
            label: '二级 1-1',
          }]
        }, {
          label: '一级 2',
          children: [{
            label: '二级 2-1',
          }, {
            label: '二级 2-2',
            
          }]
        }, {
          label: '一级 3',
          children: [{
            label: '二级 3-1',
            
          }, {
            label: '二级 3-2',
            
          }]
        },
    
            ],
            defaultProps: {
            children: 'children',
            label: 'label'
            },
            options: [{
          value: '选项1',
          label: '黄金糕'
        }, {
          value: '选项2',
          label: '双皮奶'
        }, {
          value: '选项3',
          label: '蚵仔煎'
        }, {
          value: '选项4',
          label: '龙须面'
        }, {
          value: '选项5',
          label: '北京烤鸭'
            }],
            value: '',
            input: '',
            tableData: [{
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-08',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-06',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-07',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
            }],
            currentPage1: 5,
            currentPage2: 5,
            currentPage3: 5,
            currentPage4: 4
        }
    },
    methods:{
        handleNodeClick(data) {
            console.log(data);
        },
        // form表格函数
        handleSelectionChange(val) {
            this.multipleSelection = val;
        },
        //form表格点击
        handleClick(row) {
            console.log(row);
        },
        //form删除表格
        deleteRow(index, rows) {
            rows.splice(index, 1);
        },
        // 分页
        handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
        },
        handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
        }
    }
}
</script>

<style lang="scss" scoped>
.cont{
    position: relative;
    display: flex;
    .left{
        padding: 20px 10px 0;
        box-sizing: border-box;
        width: 200px;
        height: 100vh;
        position: fixed;
        left: 0px;
        top: 60px;
        z-index: 2;
        background-color: #fff;
    }
    .right{
        width: 100%;
        position: absolute;
        top: 60px;
        right: 0;
        // width: 1380px;
        height: 100vh;
        background-color: rgba(242, 243, 245, 1);
        .content{
            position: absolute;
            width: 1360px;
            height: 750px;
            left: 370px;
            padding-top: 20px;
            .title{
                text-align: left;
                font-size: 13px;
            }
            .neicont{
                margin-top: 15px;
                width: 1360px;
                height: 750px;
                padding: 20px;
                box-sizing: border-box;
                background: inherit;
                background-color: rgba(255, 255, 255, 1);
                border-radius: 8px;
                .bluetitle{
                    display: flex;
                    .blu{
                        width: 6px;
                        height: 20px;
                        background: inherit;
                        background-color: rgba(37, 97, 239, 1);
                        border: none;
                        border-radius: 8px;
                    }
                    .blutxt{
                        height: 24px;
                        line-height: 21px;
                        margin-left: 10px;
                        font-weight: 500;
                        font-style: normal;
                        font-size: 18px;
                        color: rgba(51, 51, 51, 0.898039215686275);
                    }
                }
                .line{
                    margin-top: 10px;
                    margin-bottom: 30px;
                    height: 1px;
                    width: 100%;
                }
                .operate{
                    position: relative;
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    height: 35px;
                    margin-top: 14px;
                    .op-left{
                        display: flex;
                        .item1,.item2,.item3{
                            width: 249px;
                            height: 32px;
                            display: flex;
                            align-items: center;
                            margin-right: 35px;
                            .it2-search{
                                position: relative;
                                width: 300px;
                                height: 32px;
                                box-sizing: border-box;
                                border-width: 1px;
                                border-style: solid;
                                border-color: rgba(228, 228, 228, 1);
                                border-radius: 4px;
                                img{
                                    position: absolute;
                                    top: 6px;
                                    right: 10px;
                                }
                            }
                            .txt{
                                margin-top: 3px;
                                font-size: 13px;
                                color: #999;
                                margin-right: 20px;
                                white-space: nowrap;
                            }
                            .slc{
                                width: 200px;
                                height: 32px;
                                background: inherit;
                                background-color: rgba(255, 255, 255, 1);
                                box-sizing: border-box;
                                border-width: 1px;
                                border-style: solid;
                                border-color: rgba(228, 228, 228, 1);
                                border-radius: 4px;
                            }
                        }
                    }
                    .op-right{
                        font-size: 14px;
                        .op-r-top{
                            display: flex;
                            .m1{
                            padding: 0px 0px 0px 16px;
                            width: 100px;
                            height: 32px;
                            display: flex;
                            align-items: center;                       
                            background-color: rgba(37, 97, 239, 1);
                            border: none;
                            border-radius: 4px;
                            box-sizing: border-box;
                            font-weight: 400;
                            font-style: normal;
                            color: #FFFFFF;
                            line-height: 20px;
                            
                            .m1-1{
                                margin-top: -1px;
                                margin-right: 5px;
                                }
                            }
                            .m2,.m3{
                                margin-left: 7px;
                                width: 56px;
                                height: 32px;
                                background-color: rgba(255, 255, 255, 0.0980392156862745);
                                box-sizing: border-box;
                                border-width: 1px;
                                border-style: solid;
                                border-color: rgba(37, 97, 239, 1);
                                border-radius: 4px;
                                font-weight: 400;
                                font-style: normal;
                                color: #2561EF;
                                line-height: 32px;
                            }
                            .m3{
                                width: 80px !important;
                            }
                        }
                        
                    }
                }
                .list{
                    // width: 213px;
                    height: 80px;
                    .lists{
                        margin-top: 20px;
                        display: flex;
                        justify-content: space-around;
                        li{
                            width: 213px;
                            height: 80px;
                            line-height: 28px;
                            padding: 10px 0;
                            box-sizing: border-box;
                            border-width: 1px;
                            text-align: center;
                            border-style: solid;
                            border-color: rgba(228, 228, 228, 1);
                            border-radius: 4px;
                            font-weight: 400;
                            
                            .text{
                                .text1{
                                    color: rgb(153, 153, 153);
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}
.active{
    border-color: rgba(37, 97, 239, 1);
    color: rgb(37, 97, 239);
}
.item2{
    width: 300px !important;
    margin-right: 0 !important;
    margin-left: 62px;
}
.item3{
    height: 32px !important;
}
::v-deep .slc .el-input__inner{
    height: 32px;
    border-color: rgba(228, 228, 228, 1);
    border-width: 0.5px; ;
    box-shadow: none;
    // transform: scale(0.5);
}
::v-deep .item3 .el-input__inner{
    width: 260px !important;
    height: 32px;
    box-sizing: border-box;
}

::v-deep .neicont .el-picker-panel{
    top: 279px !important;
}
::v-deep .neicont .el-date-range-picker{
    top: 279px !important;
}
::v-deep .neicont .el-picker-panel__body-wrapper{
    top: 279px !important;
}
::v-deep .item2 .el-input__inner{
    height: 32px;
}
.form{
    width: 1320px;
}
</style>